<template>
  <div class="content-box">
    <!--标题-->
    <div class="content-title">
      <i class="el-icon-milk-tea"></i>
      <span>配置与开发</span>
    </div>
    <el-form label-width="120px" style="width:100%">
      <!--基本信息-->
      <div class="content-item-box">
        <div class="title-box">
          <div class="item-title">基本信息</div>
          <div class="btn-item" @click="handleEditTable">低代码配置<i class="icon el-icon-s-tools"/></div>
        </div>
        <div class="contents">
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      表名称
                    </span>
                <el-input :disabled="true" v-model="modeConfig.tableName"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      表描述
                    </span>
                <el-input :disabled="true" v-model="modeConfig.componentDesc"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      作者
                    </span>
                <el-input :disabled="true" v-model="modeConfig.functionAuthor"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      表单宽(PX)
                      <el-tooltip content="设置新增与编辑表单窗口宽度，可通过【设置】按钮进行表单【右下角拖拽】设置大小"
                                  placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="设置新增与编辑表单窗口宽度" v-model="modeConfig.formWidth"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="openModeForm"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      表单高(PX)
                      <el-tooltip content="设置新增与编辑表单窗口宽度，可通过【设置】按钮进行表单【右下角拖拽】设置大小"
                                  placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="设置新增与编辑表单窗口高度" v-model="modeConfig.formHeight"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="openModeForm"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      备注
                    </span>
                <el-input type="textarea" :rows="3" v-model="modeConfig.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--后端开发-->
      <div class="content-item-box">
        <div class="title-box">
          <div class="item-title">后端开发</div>
          <div>
            <span class="himt">后端程序由优树搭图形程序提供支持</span>
            <el-tooltip content="点击后新页面打开优树搭官网" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="contents">
          <div class="himt">以下相应输入框若为空，则意味着所对应的功能被屏蔽</div>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      列表API编码
                      <el-tooltip content="通过优树搭获取列表数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭获取列表数据的API编码" v-model="modeConfig.ysdListApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdListApi)"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      新增API编码
                      <el-tooltip content="通过优树搭新增数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭新增数据的API编码" v-model="modeConfig.ysdAddApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdAddApi)"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      修改API编码
                      <el-tooltip content="通过优树搭修改数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭修改数据的API编码" v-model="modeConfig.ysdUpdateApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdUpdateApi)"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      删除API编码
                      <el-tooltip content="通过优树搭删除数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭删除数据的API编码" v-model="modeConfig.ysdDeleteApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdDeleteApi)"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      导入API编码
                      <el-tooltip content="通过优树搭导入数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭导入数据的API编码" v-model="modeConfig.ysdImportApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdImportApi)"/>
            </el-col>
          </el-row>
          <el-row class="item-row">
            <el-col :span="24" class="item-row-box">
              <el-form-item>
                    <span slot="label">
                      导出API编码
                      <el-tooltip content="通过优树搭导出数据的API编码" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                <el-input clearable placeholder="请录入优树搭导出数据的API编码" v-model="modeConfig.ysdExportApi"/>
              </el-form-item>
              <i class="icon el-icon-s-tools" @click="gotoSet(modeConfig.ysdExportApi)"/>
            </el-col>
          </el-row>
        </div>
      </div>


      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>

    <!-- 表单对话框 -->
    <el-dialog title="设置表单窗口大小" v-if="openDialog" :visible.sync="openDialog"
               class="addendum-dialog"
               v-dialog-drag="{'width':modeConfig.formWidth,'height':modeConfig.formHeight,'mode':'display'}"
               v-dialog-drag-width="{'mode':'display'}"
               v-dialog-drag-height="{'mode':'display'}"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :append-to-body="true"
               @close="closeDialog" >
      <EditDisplay v-if="openDialog"
                   :formBuildKey="modeConfig.formBuildKey"
                   @submitSet="submitSet"
                   @cancel="closeDialog"></EditDisplay>
    </el-dialog>
  </div>
</template>
<script>
import {init} from "@/views/youshuda/api/BaseApi";
import {getToken} from '@/utils/auth'
import request from "@/utils/request";

export default {
  name: "ModeQuickSet",
  components: {
    EditDisplay: () => import('@/views/youshuda/components/FormEdit/display')
  },
  data() {
    return {
      openDialog:false, //窗口是否显示
      modeConfig: {},
      levels: '' //菜单路径
    };
  },
  props: {
    //业务模块配置信息
    tabGenId: {
      default: ''
    }
  },
  created() {
    if (this.strIsNotEmpty(this.tabGenId)) {
      /** 获取配置信息 **/
      this.getSetInfo();
    }
    let matcheds = this.$route.matched.filter(item => item.meta && item.meta.title)
    for(let i = 0; i < matcheds.length; i++) {
      let obj = matcheds[i];
      if(obj.meta.title){
        if(this.levels) this.levels+="/";
        this.levels += obj.meta.title;
      }
    }
  },
  methods: {
    /**
     * 跳转配置
     */
    gotoSet(apiCode){
      /**
       * 低零代码平台Token信息
       * key：在header中的属性名
       * val：在header中的token值
       */
      let tokenInfo={
        key:'Authorization',
        val:'Bearer ' + getToken()
      }
      let url=process.env.VUE_APP_BASE_URL + `/MksAdmin/index.html`;
      //加密
      let ciphertext=window.btoa(JSON.stringify(tokenInfo));
      //以新窗口打开Java 图形化编程平台
      window.open(url+'?token='+ciphertext+'&procTarget='+apiCode+'&levels='+this.levels)
    },
    /**
     * 获取配置信息
     */
    getSetInfo() {
      init(this.tabGenId, '').then(res => {
        if (res.code == 200) {
          this.modeConfig = res.data;
        } else {
          this.msgError(res.msg)
        }
      })
    },
    /**
     * 保存
     */
    save() {
      let that = this
      request({
        url: 'page/gener/table/config/save',
        method: 'post',
        data: this.modeConfig
      }).then(res => {
        if (res.code == 200) {
          that.msgSuccess(res.msg)
          setTimeout(() => {
            that.close();
            that.$emit("changeModeConfig", that.modeConfig)
          }, 1000)
        } else {
          that.msgError(res.msg)
        }
      })
    },
    /** 修改按钮操作 */
    handleEditTable() {
      let params={
        "redirect":this.$route.path,
        "levels":this.levels
      }
      this.$tab.openPage("修改[" + this.modeConfig['componentDesc'] + "]生成配置", '/tool/gen-edit/index/' + this.modeConfig['tableId'], params);
    },
    /**
     * 关闭
     */
    close() {
      this.$emit("close")
    },
    openModeForm() {
      this.openDialog=true;
    },
    closeDialog(){
      this.openDialog=false;
    },
    submitSet(){
      this.$set(this.modeConfig,'formWidth',this.$store.state.settings.formWidth);
      this.$set(this.modeConfig,'formHeight',this.$store.state.settings.formHeight);
      this.closeDialog();
    }
  },
};
</script>

<style scoped>

.btn-box {
  display: flex;
  align-items: center;
  justify-content: right;
}

.content-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
}

.content-box .content-title {
  background-color: #304156;
  color: white;
  width: 100%;
  padding: 10px;
}

.content-box .content-title span {
  margin-left: 6px;
}

/*基本信息*/
.content-box .content-item-box {
  width: 100%;
  display: flex;
  align-items: start;
  padding: 10px 20px;
  flex-direction: column;
}

.content-box .content-item-box .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e1e1e1;
}

.content-box .content-item-box .title-box .btn-item:hover {
  cursor: pointer;
}

.content-box .content-item-box .title-box .icon {
  margin-left: 4px;
}

.content-box .content-item-box .contents .icon {
  margin-left: 8px;
}

.content-box .content-item-box .contents .icon:hover {
  cursor: pointer;
}

.content-box .content-item-box .title-box .item-title {
  font-weight: bold;
}

.content-box .content-item-box .himt {
  font-size: 12px;
  color: #bfbfbf;
  margin-right: 4px;
}

.content-box .content-item-box .contents .himt {
  margin: 10px 0;
}

.content-box .content-item-box .contents {
  width: 100%;
}

.content-box .content-item-box .contents .item-row {
  margin: 10px 0;
}

.content-box .content-item-box .contents .item-row-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.content-box .content-item-box .contents .item-row-box .el-form-item {
  width: 90%;
  margin: 0;
}

</style>
